<template>
  <div class="mod-config">

    <div class="button-area">
      <el-button type="primary">微信公众号配置</el-button>
      <el-button type="primary" @click="dataConfigHandle">微信基础数据配置</el-button>
      <el-button type="primary" @click="shopPayConfigHandle">门店支付参数配置</el-button>
      <el-button type="primary" @click="shopConfigHandle">附近门店管理</el-button>
    </div>

    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" size="medium" label-width="200px">
      <div class="module-common">
        <h3 class="module-title">微信公众号消息</h3>
        <div class="module-content">
          <table>
            <tr>
              <td class="label-bg align_right" width="180">EIMS公网地址</td>
              <td>
                <el-form-item prop="eimsPublicAddress" label-width="0">
                  <el-input v-model="dataForm.eimsPublicAddress" placeholder="EIMS公共地址" style="width: 360px;"></el-input>
                  <span style="color: red;margin-left: 20px;">* 需以域名形式填写</span>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right">微信中配置的服务器地址</td>
              <td>
                <el-form-item prop="wxUrl" label-width="0">
                  <el-input v-model="dataForm.wxUrl" placeholder="微信中配置的服务器地址(URL)"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right">token</td>
              <td>
                <el-form-item label-width="0" prop="wxToken">
                  <el-input v-model="dataForm.wxToken" style="width: 360px;"></el-input>
                  <span style="color: red;margin-left: 20px;">* 必须与微信公众平台 ==> 开发 ==> 基本配置 ==> 令牌(Token)一致。</span>
                </el-form-item>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="module-common">
        <h3 class="module-title">其他配置信息</h3>
        <div class="module-content">
          <table>
            <tr>
              <td class="label-bg align_right" width="280">注册验证方式</td>
              <td>
                <el-form-item prop="verifyMethod" label-width="0">
                  <el-radio-group v-model="dataForm.verifyMethod">
                    <el-radio :label="1">短信验证码(推荐)</el-radio>
                    <el-radio :label="2">系统生成验证码</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">微客服</td>
              <td>
                <el-form-item prop="customerService" label-width="0">
                  <el-radio-group v-model="dataForm.customerService">
                    <el-radio :label="1">微信客服(多客服)</el-radio>
                    <el-radio :label="2">第三方客服(如：百度商桥)</el-radio>
                    <el-radio :label="3">专属客服</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">医师评价</td>
              <td>
                <el-form-item prop="evaluation" label-width="0">
                  <el-radio-group v-model="dataForm.evaluation">
                    <el-radio :label="1">每人针对一次诊疗信息能评价一次</el-radio>
                    <el-radio :label="2">每人针对一次诊疗信息能评价多次</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">手机端配镜单详细页显示</td>
              <td>
                <el-form-item prop="showType" label-width="0">
                  <el-radio-group v-model="dataForm.showType">
                    <el-radio :label="1">商品名称</el-radio>
                    <el-radio :label="2">商品类别名称</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">是否允许手机端配镜支付、诊间支付</td>
              <td>
                <el-form-item prop="phonePayFlag" label-width="0">
                  <el-radio-group v-model="dataForm.phonePayFlag">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                  <span style="color: red;margin-left: 20px;">会员是否可以使用微信对未付款的配镜单进行付款，但不影响查看未付款的配镜单</span>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">微信注册时，是否需要填写详细会员信息</td>
              <td>
                <el-form-item prop="customerDetailFlag" label-width="0">
                  <el-radio-group v-model="dataForm.customerDetailFlag">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                  <span style="color: red;margin-left: 20px;">会员是否可以使用微信对未付款的门店挂号单进行付款，但不影响查看未付款的门店挂号单</span>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">微信注册后，是否允许修改会员信息</td>
              <td>
                <el-form-item prop="editCustomerFlag" label-width="0">
                  <el-radio-group v-model="dataForm.editCustomerFlag">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">微信注册后，是否允许解除绑定的单选项</td>
              <td>
                <el-form-item prop="bindingFlag" label-width="0">
                  <el-radio-group v-model="dataForm.bindingFlag">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">预约时，是否允许新建子卡的单选项</td>
              <td>
                <el-form-item prop="affiliatedCardFlag" label-width="0">
                  <el-radio-group v-model="dataForm.affiliatedCardFlag">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">验光前是否确认就诊项目</td>
              <td>
                <el-form-item prop="clinicProjectFlag" label-width="0">
                  <el-radio-group v-model="dataForm.clinicProjectFlag">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">微信会员卡号生成方式</td>
              <td>
                <el-form-item prop="cardPrefix" label-width="0">
                  <el-input v-model="dataForm.cardPrefix" placeholder="微信会员卡号自定义前缀(默认为空)" style="width: 380px;">
                    <el-select v-model="dataForm.generationMethod" slot="append">
                      <el-option label="手机号" value="1"></el-option>
                      <el-option label="时间戳" value="2"></el-option>
                    </el-select>
                  </el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">取镜后几天发送推广红包</td>
              <td>
                <el-form-item prop="pushRedEnvelopeDay" label-width="0">
                  <el-input v-model="dataForm.pushRedEnvelopeDay" placeholder="取镜后几天发送推广红包" style="width: 380px;">
                    <template slot="append">天</template>
                  </el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">间隔多少分钟发送专属客服聊天提醒通知</td>
              <td>
                <el-form-item prop="intervalTime" label-width="0">
                  <el-input v-model="dataForm.intervalTime" placeholder="间隔多少分钟发送专属客服聊天提醒通知" style="width: 380px;">
                    <template slot="append">分钟</template>
                  </el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">微信注册时，默认会员姓名的输入项</td>
              <td>
                <el-form-item prop="defaultNickname" label-width="0">
                  <el-input v-model="dataForm.defaultNickname" placeholder="自定义字符串(默认为空)"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">关注回复</td>
              <td>
                <el-form-item prop="attentionReplyName" label-width="0">
                  <el-input v-model="dataForm.attentionReplyName" placeholder="关注回复" style="width: 380px;" readonly>
                    <el-button slot="append" @click="checkFollowReply">选择</el-button>
                    <el-button slot="append" @click="followReplyClear">清空</el-button>
                    <!-- <el-button slot="append" @click="followReplyDetail">详情</el-button> -->
                  </el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">关键词回复</td>
              <td>
                <el-form-item prop="keywordReplyName" label-width="0">
                  <el-input v-model="dataForm.keywordReplyName" placeholder="关键词回复" style="width: 380px;">
                    <el-button slot="append" @click="checkKeywordReply">选择</el-button>
                    <el-button slot="append" @click="keywordReplyClear">清空</el-button>
                  </el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">客服上班时间</td>
              <td>
                <el-form-item prop="workTime" label-width="0">
                  <el-input v-model="dataForm.workTime" placeholder="客服上班时间"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">客服下班时间</td>
              <td>
                <el-form-item prop="timeFromWork" label-width="0">
                  <el-input v-model="dataForm.timeFromWork" placeholder="客服下班时间"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">下班回复内容</td>
              <td>
                <el-form-item prop="afterWorkReply" label-width="0">
                  <el-input v-model="dataForm.afterWorkReply" placeholder="下班回复内容"></el-input>
                </el-form-item>
              </td>
            </tr>
          </table>


        </div>
      </div>
      <div class="module-common">
        <h3 class="module-title">微信公众号消息</h3>
        <div class="module-content">
          <table>
            <tr>
              <td class="label-bg align_right" width="280">个人中心底部导航栏是否显示</td>
              <td>
                <el-form-item prop="bottomNavigationBar" label-width="0">
                  <el-radio-group v-model="dataForm.bottomNavigationBar">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="0">隐藏</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">个人中心菜单中【我的病例】是否显示</td>
              <td>
                <el-form-item prop="caseFlag" label-width="0">
                  <el-radio-group v-model="dataForm.caseFlag">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="0">隐藏</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">个人中心菜单中【我的资料】是否显示</td>
              <td>
                <el-form-item prop="dataFlag" label-width="0">
                  <el-radio-group v-model="dataForm.dataFlag">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="0">隐藏</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">个人中心菜单中【我的积分】是否显示</td>
              <td>
                <el-form-item prop="integralFlag" label-width="0">
                  <el-radio-group v-model="dataForm.integralFlag">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="0">隐藏</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">个人中心菜单中【消息中心】是否显示</td>
              <td>
                <el-form-item prop="messageCenterFlag" label-width="0">
                  <el-radio-group v-model="dataForm.messageCenterFlag">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="0">隐藏</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">个人中心菜单中【配镜支付】是否显示</td>
              <td>
                <el-form-item prop="glassesPaymentFlag" label-width="0">
                  <el-radio-group v-model="dataForm.glassesPaymentFlag">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="0">隐藏</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">个人中心菜单中【挂号支付】是否显示</td>
              <td>
                <el-form-item prop="registrationPaymentFlag" label-width="0">
                  <el-radio-group v-model="dataForm.registrationPaymentFlag">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="0">隐藏</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">个人中心菜单中【邀请好友】是否显示</td>
              <td>
                <el-form-item prop="inviteFriendsFlag" label-width="0">
                  <el-radio-group v-model="dataForm.inviteFriendsFlag">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="0">隐藏</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">个人中心菜单中【我的代金券】是否显示</td>
              <td>
                <el-form-item prop="vouchersFlag" label-width="0">
                  <el-radio-group v-model="dataForm.vouchersFlag">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="0">隐藏</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">个人中心菜单中【预约挂号】是否显示</td>
              <td>
                <el-form-item prop="appointmentRegistrationFlag" label-width="0">
                  <el-radio-group v-model="dataForm.appointmentRegistrationFlag">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="0">隐藏</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">个人中心菜单中【客户服务】是否显示</td>
              <td>
                <el-form-item prop="customerServiceFlag" label-width="0">
                  <el-radio-group v-model="dataForm.customerServiceFlag">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="0">隐藏</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="label-bg align_right" width="280">个人中心菜单中【专属客服】是否显示</td>
              <td>
                <el-form-item prop="dedicatedCustomerServiceFlag" label-width="0">
                  <el-radio-group v-model="dataForm.dedicatedCustomerServiceFlag">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="0">隐藏</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </el-form>

    <div class="submit-area">
      <el-button type="primary" size="medium" :loading="ischeck" @click="saveConfigData">保 存</el-button>
    </div>
    <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
    <data-config v-if="dataConfigVisible" ref="dataConfigDialog"></data-config>
    <pay-config v-if="payVisible" ref="payDialog"></pay-config>
    <!-- 附近门店管理 -->
    <shop-config v-if="shopConfigVisible" ref="shopConfigDialog"></shop-config>


    <follow-reply v-if="followVisible" ref="followDialog" @refreshData="getFollowReplyData"></follow-reply>
    <keyword-reply v-if="keywordVisible" ref="keywordDialog" @refreshData="getKeywordReplyData"></keyword-reply>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getWxConfigurationObj, addWxConfigurationObj, putWxConfigurationObj } from '@/api/mp/wxconfiguration'

  import TableForm from './wxconfiguration-form'
  import DataConfig from './components/dataconfig'
  import PayConfig from './components/PayConfig'
  import ShopConfig from './components/ShopConfig'

  import FollowReply from '../_components/SearchMaterial'
  import KeywordReply from '../_components/SearchKeyword'

  export default {
    data() {
      return {
        ischeck: false,

        dataForm: {
          eimsPublicAddress: '',
          wxUrl: '',
          wxToken: '',

          verifyMethod: '',
          customerService: '',
          evaluation: '',
          showType: '',
          phonePayFlag: '',
          customerDetailFlag: '',
          editCustomerFlag: '',
          bindingFlag: '',
          affiliatedCardFlag: '',
          clinicProjectFlag: '',
          cardPrefix: '',
          generationMethod: '',
          pushRedEnvelopeDay: '',
          intervalTime: '',
          defaultNickname: '',
          attentionReply: '',
          attentionReplyName: '',
          keywordReply: '',
          workTime: '',
          timeFromWork: '',
          afterWorkReply: '',
          bottomNavigationBar: '',
          caseFlag: '',
          dataFlag: '',
          integralFlag: '',
          messageCenterFlag: '',
          glassesPaymentFlag: '',
          registrationPaymentFlag: '',
          inviteFriendsFlag: '',
          vouchersFlag: '',
          appointmentRegistrationFlag: '',
          customerServiceFlag: '',
          dedicatedCustomerServiceFlag: '',
        },
        dataRule: {

        },
        addOrUpdateVisible: false,
        dataConfigVisible: false,
        payVisible: false,
        shopConfigVisible: false,

        followVisible: false,
        keywordVisible: false,
      }
    },
    components: {
      TableForm,
      DataConfig,
      PayConfig,
      ShopConfig,
      FollowReply,
      KeywordReply
    },
    created() {
      this.getConfigData()
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    methods: {
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        fetchWxConfigurationList(Object.assign({
          current: this.pageIndex,
          size: this.pageSize
        })).then(response => {
          this.dataList = response.data.data.records
          this.totalPage = response.data.data.total
        })
        this.dataListLoading = false
      },
      // 获取基础信息配置数据
      getConfigData() {
        this.$set(this.dataForm,'id',1)
        getWxConfigurationObj(1).then(response => {
          // console.log(response)
          this.dataForm = response.data.data || { id: 0 }
        })
      },
      // 微信基础数据配置
      dataConfigHandle() {
        this.dataConfigVisible = true
        this.$nextTick(() => {
          this.$refs.dataConfigDialog.init()
        })
      },
      // 门店支付参数配置
      shopPayConfigHandle() {
        this.payVisible = true
        this.$nextTick(() => {
          this.$refs.payDialog.init()
        })
      },
      // 附近门店管理
      shopConfigHandle() {
        this.shopConfigVisible = true
        this.$nextTick(() => {
          this.$refs.shopConfigDialog.init()
        })
      },

      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 保存微信配置信息数据
      saveConfigData() {
        this.ischeck = true
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            if (this.dataForm.id) {
              putWxConfigurationObj(this.dataForm).then(response => {
                this.$message.success("修改成功");
                setTimeout(() => {
                  this.ischeck = false
                },500)
              })
            } else {
              addWxConfigurationObj(this.dataForm).then(result => {
                this.$message.success("新增成功");
                setTimeout(() => {
                  this.ischeck = false
                },500)
              }).catch(() => {
                this.ischeck = false
              })
            }
          }
        });
      },

      // 选择关注回复内容
      checkFollowReply(){
        this.followVisible = true
        this.$nextTick(() => {
          this.$refs.followDialog.init()
        })
      },
      // 获取关注回复内容
      getFollowReplyData(data){
        this.$set(this.dataForm,'attentionReply',data.id)
        this.$set(this.dataForm,'attentionReplyName',data.messageTheme)
      },
      // 清空关注回复内容
      followReplyClear(){
        this.$set(this.dataForm,'attentionReply','')
        this.$set(this.dataForm,'attentionReplyName','')
      },
      // 选择关键词回复内容
      checkKeywordReply(){
        this.keywordVisible = true
        this.$nextTick(() => {
          this.$refs.keywordDialog.init()
        })
      },
      // 获取关键词回复内容
      getKeywordReplyData(data){
        this.$set(this.dataForm,'keywordReply',data.id)
        this.$set(this.dataForm,'keywordReplyName',data.keywords)
      },
      // 清空关键词回复内容
      keywordReplyClear(){
        this.$set(this.dataForm,'keywordReply','')
        this.$set(this.dataForm,'keywordReplyName','')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .button-area {
    display: flex;
    justify-content: flex-start;
    background-color: #fff;
    padding: 20px;
  }

  .module-common {
    background-color: #fff;
    margin-bottom: 10px;

    .module-title {
      font-size: 16px;
      font-weight: 700;
      color: #999;
      border-bottom: 1px solid #f2f2f2;
      height: 40px;
      line-height: 40px;
      padding-left: 20px;
    }

    .module-content {
      padding: 20px;
      padding-top: 0;
    }
  }

  table {
    width: 100%;
  }

  table tr td {
    border: solid 2px #ccc;
  }

  .submit-area {
    // background-color: #fff;
    margin-bottom: 20px;
    padding: 20px;
  }
</style>
